/*
* @Author: sc
* @Date:   2019-01-08 00:12:41
* @Last Modified by:   sc
* @Last Modified time: 2019-01-14 00:49:49
*/
import React 					from 'react'
import { observer, inject} 		from 'mobx-react';
import { Link } 				from 'react-router-dom';

import './index.css'

@inject('store')
@observer
class TableList extends React.Component{
	constructor(props){
		super(props);
	}
	// 监听输入框变化
	onInputChange(e){
		this.inputValue = e.target.value
	}
	// 输入框回车,完成更新内容和编辑状态的切换
	onInputKeyUp(e){
		if(e.keyCode === 13){
			if(!!this.inputValue){
				this.props.store.todos[this.id - 1].editText(this.inputValue);
				// 控制文本与输入框的切换，文本框
				this.props.store.todos[this.id - 1].changeEditStatus();
				// 切回任意行可编辑状态
				this.props.store.changeUpdateKey();
			}
		}
	}
	// 编辑
	editThing(id){
		if(this.props.store.updateKey){
			// 缓存id
			this.id = id;
			// 控制文本与输入框的切换，输入框
			this.props.store.todos[id - 1].changeEditStatus();
			// 切回其他行不可编辑状态
			this.props.store.changeUpdateKey();
		}else{
			alert('不可同时编辑多个！');
		}
	}
	// 完成计划
	finishThing(id){
		this.props.store.todos[id-1].finish();
		console.log()
	}	
	// 删除计划
	deleteThing(id){
		// 查出一个BUG，这里删除的时候需检测是否正处于编辑状态
		if(!this.props.store.updateKey){
			this.props.store.changeUpdateKey();
		}
		this.props.store.todos[id-1].delete();
	}
	render(){
		let tableHeader = this.props.tableHeads.map(
			(tableHead, index) => {
				// 支持json
				if(typeof tableHead === 'object'){
					return (
						<th key={index} width={tableHead.width}>{tableHead.name}</th>
					)
				}
				else if(typeof tableHead === 'string'){
					return (
						<th key={index}>{tableHead}</th>
					)
				}
			}
		);
		// 对出现undefined情况进行错误处理
		let tableBody;
		if(this.props.tableBodys === undefined || this.props.tableBodys.length === 0){
			tableBody = (
				<tr className="text-danger">
					<td colSpan={this.props.tableHeads.length} className="text-center first-loading">
						无数据
					</td>
				</tr>
			)
		}else{
			tableBody = this.props.tableBodys.map(
				(items, index) => {
					let id = 0;
					if(typeof items === 'object'){
						let tdItem = items.map((item, itemIndex) => {
							// 判断类型，id
							if(item.type === 'id'){
								id = parseInt(item.data);
								return (
									<td key={itemIndex}>{item.data}</td>
								);
							}
							// 不可编辑文本
							else if(item.type === 'info' && item.edit === false){
								return (
									<td key={itemIndex}>{item.data}</td>
								);
							}
							// 可编辑文本
							else if (item.type === 'info' && item.edit === true){
								return (
									<td key={itemIndex}>
										<Link to={"edit?id="+ id }
											  className={this.props.store.todos[id-1].finished 
														? "done" : "not-done"}>
											<div className={`span-${this.props.store.todos[id-1].editStatus}`}
												 onClick={() => {this.editThing(id)}}>
													{item.data}
											</div>
										</Link>
										<input  type="text" 
												className={`form-control input-${this.props.store.todos[id-1].editStatus}`} 
									   			placeholder="请输入编辑内容"
									   			onChange={(e) => this.onInputChange(e)}
									   			onKeyUp={(e) => this.onInputKeyUp(e)}/>
									</td>
								);
							}
							// 操作，暂时只支持完成和删除
							else if(item.type === 'opear'){
								let temp = item.data.map( (option, opIndex) => {
									if(option === 'finish'){
										return(
											<Link key={opIndex} to={"finish?id="+id}
													className={this.props.store.todos[id-1].finished 
																? "done" : "not-done"}>
												<span className="glyphicon glyphicon-ok opear"
													  onClick={() => {this.finishThing(id)}}>
												</span>
											</Link>
										);
									}
									else if(option === 'delete'){
										return(
											<Link key={opIndex} to={"delete?id="+id} className="not-done">
												<span className="glyphicon glyphicon-remove opear"
													  onClick={() => {this.deleteThing(id)}}>
												</span>
											</Link>
										);
									}
								});
								return(
									<td key={itemIndex}>
										{temp}
									</td>
								);
							}
						});
						return (
							<tr key={index} className={this.props.store.todos[id-1].finished 
														? "done" : "not-done"}>
								{tdItem}
							</tr>
						);
					}
				}
			);
		}
		return(
			<div className="row">
				<div className="col-md-12">
					<table className="table table-bordered">
						<thead>
							<tr>
								{tableHeader}								
							</tr>
						</thead>
						<tbody>
							{tableBody}
						</tbody>
					</table>
				</div>
			</div>
		);
	}
}

export default TableList;